<template>
	<view>
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content"><text class="text-black text-bold">联系人</text></block>
		</cu-custom>

		<view class="cu-form-group margin-top">
			<view class="content">
				<text @click="titleClick" :class="index<titlelist.length-1?'text-blue':'text-gray'" :data-id="index" v-for="(title,index) in titlelist">
					{{title.name}}
					<text v-show="titlelist.length>1 && index<titlelist.length-1" class="cuIcon-right"></text>
				</text>
			</view>
		</view>

		<checkbox-group name="selectdepart" class="cu-list margin-top-xs menu sm-border">
			<view class="cu-item" :key="index" v-for="(depart,index) in departmentlist">
				<view @click="DepartClick" :data-id="index" class="content">
					<checkbox class="round blue" :class="depart.clicked?'checked':''" :checked="depart.clicked"></checkbox>
					<text class="text-grey padding-left">{{depart.deptName}}({{depart.listUser.length}}人)</text>
				</view>
				<view class="action border-left">
					<button :disabled="depart.clicked||!depart.listUser.length>0" class="cuIcon-list bg-white text-blue" :data-id="index"
					 @tap.stop="nextDepart">下级</button>
				</view>
			</view>
			<view name="selectemployee" class="cu-list menu sm-border margin-top-xs">
				<view class="cu-item" @click="EmployeeClick" v-for="(employee,index) in employeelist" :key="index" :data-id="index">
					<view class="content">
						<checkbox class="round blue" :class="employee.clicked?'checked':''" :checked="employee.clicked" />
						<view class="cu-avatar round xsm margin-left" :style="'background-image:url('+employee.url+');'"></view>
						<text class="margin-left text-grey">{{employee.name}}</text>
					</view>
				</view>
			</view>
		</checkbox-group>

	<!-- 	<view class="bottom-float cu-bar bg-white solid-top">
			<text class="action text-blue text-sm">
				{{selectdepart.length}}
			</text>
			<view class="action">
				<button class="cu-btn bg-blue shadow">确定</button>
			</view>
		</view> -->

	</view>
</template>

<script>
	export default {
		data() {
			return {
				isSelectAll: false,
				setlectTip: '请选择',
				titlelist:[{name: '通讯录'}],
				employeelist: [],
				departmentlist: []
			}
		},
		onBackPress() {
		
		},
		onShow() {
			console.log(this.departmentlist)
		},
		onLoad() {
			let res = this.$route.query.res
			if (typeof(res) != 'undefined') {
				let data = JSON.parse(res)
				// console.log(data)
				this.departmentlist = data.childDepartment
				this.employeelist = data.listUser
				let titlelist = data.title
				titlelist.push({name: data.deptName})
				this.titlelist = titlelist
			} else {
				this.initData()
			}
		},
		methods: {
			titleClick(e) {
				let index = e.currentTarget.dataset.id
				if(index<this.titlelist.length-1){
					console.log(this.titlelist.length-index-1)
					uni.navigateBack({
						delta: this.titlelist.length-index-1
					})
				}
			},
			DepartClick(e) {
				let index = e.currentTarget.dataset.id
				// this.departmentlist[index].clicked = !this.departmentlist[index].clicked
				// console.log(this.departmentlist[index].clicked)
				// if(this.departmentlist[index].clicked){
				// 	this.selectdepart.push(this.departmentlist[index])
				// }else{
				// 	let sindex = this.selectdepart.indexOf(this.departmentlist[index]);
				// 	if(sindex!=-1)
				// 	this.selectdepart.splice(sindex,1);
				// }
			},
			EmployeeClick(e) {
				let index = e.currentTarget.dataset.id
				console.log(this.employeelist[index])
				this.employeelist[index].clicked = !this.employeelist[index].clicked
			},
			nextDepart(e) {
				let index = e.currentTarget.dataset.id
				let depart = this.departmentlist[index]
				depart.title = this.titlelist
				// 列表页点击跳转
				let data = JSON.stringify(depart) // result传递的query参数。我们转为string
				this.$router.push({
					path: 'contacts',
					query: {
						res: data,
					}
				})
			},
			initData() {
				uni.request({
					url: this.$constant.BASEURL + this.$constant.GET_DEPART_TREE,
					method: "POST",
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						username: getApp().globalData.username,
						token: getApp().globalData.token,
						unitno: getApp().globalData.orgcode
					},
					success: (res) => {
						let data = res.data.data
						if (res.data.code == 0 && typeof(data) != 'undefined') {
							//处理部门数据
							let departlist = data[0].childDepartment
							let userlist = data[0].listUser
							this.departmentlist = departlist
							this.employeelist = userlist
						} else {
							uni.showToast({
								title: res.data.message,
								icon: 'none'
							})
						}
					}
				});

			},
			//用来为列表加上选择标记 clicked
		},
	}
</script>

<style>
	.padding-left {
		padding-left: 25upx;
	}

	.border-left {
		border-left: 1upx solid #dbdbdb;
		padding: 0upx 25upx;
	}

	button::after {
		border: none;
	}

	button[disabled] {
		background-color: #FFFFFF;
		opacity: 1;
		color: #aaaaaa;
	}

	.bottom-float {
		bottom: 0;
		width: 100%;
		position: fixed;
	}

	.cu-avatar.xsm {
		width: 68upx;
		height: 68upx;
		font-size: 1em;
	}
</style>
